<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <Row class="live_wrapper clearfix">
          <Select v-model="filter.form_type"
                  style="float:right; width: 200px;margin-right: 35px;"
                  @on-change="search"
                  placeholder="选择表单类型">
            <Option value="0">全部</Option>
            <Option :value="item.code"
                    v-for="(item, index) in form_type_list">{{item.name}}</Option>
          </Select>
          <Input v-model="filter.company_name"
                 @on-search="search"
                 search
                 enter-button="查询"
                 placeholder="请输入企业名称"
                 style="width:200px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
          <Input v-model="filter.phone"
                 @on-search="search"
                 search
                 enter-button="查询"
                 placeholder="请输入手机号"
                 style="width:200px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
          <Input v-model="filter.name"
                 @on-search="search"
                 search
                 enter-button="查询"
                 placeholder="请输入姓名"
                 style="width:200px; margin-right: 10px;float: right;top:0;font-size: 14px;" />
        </Row>
        <Row class="margin-top-10 table_pattern table_pattern2">
          <Table :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="show_content"
           title="需求处理"
           width="500px"
           :mask-closable="false"
           class="goods_modal"
           :z-index='100'>
      <Form :model="formValidate"
            ref="formValidate"
            :label-width="80">
        <FormItem label="处理结果"
                  prop="content"
                  class="label_required">
          <Input v-model="formValidate.content"
                 type="textarea"
                 :rows="4"
                 placeholder="请输入处理结果"
                 style="width:330px;" />
        </FormItem>
        <FormItem>
          <Button :loading="saving"
                  type="primary"
                  @click="handleSubmit"
                  style="width: 90px;height: 35px;border-radius: 0;font-size: 14px;">提交</Button>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="show_result"
           title="处理结果"
           width="500px"
           :mask-closable="false"
           class="goods_modal"
           :z-index='100'>
      <Form :model="formValidate"
            ref="formValidate"
            :label-width="80">
        <FormItem label="处理结果"
                  prop="content"
                  class="label_required">
          <Input v-model="result"
                 type="textarea"
                 :rows="4"
                 readonly
                 style="width:330px;" />
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="show_form_info"
           title="表单详情"
           width="620px"
           :mask-closable="false"
           class="public_modal_header edit_modal show_audit">
      <div id="formDetail"
           style="padding: 20px 0; color:#000; font-size:16px">
        <div style="height:40px; margin-top:10px; display:flex;justify-content:center;align-items:center">
          <div style="display:inline-block;float:left">
            <img src="https://qiniu.mocomedia.cn/Fif60241WY_lWg3AySaE0uCH2fXx.jpg"
                 style="border-radius:16px; width:32px; height:32px">
          </div>
          <div style="display:inline-block;margin-top:2px;margin-left:10px;float:left;font-size:20px;font-weight:bolder">常电通用电需求全流程管理系统</div>
        </div>
        <div style="clear: both"></div>
        <div style="margin-top: 20px; padding-left: 50px;">
          <p style="margin-top:10px;margin-left:10px;font-weight:bolder">姓名</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.name}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">手机号</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.phone}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">企业名称</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.company_name}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">服务类型</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.service_type_name}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">电压等级</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.voltage_level_name}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">容量</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.capacity}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">运维方式</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.operation_type_name}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">施工单位</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.company_name_sg}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">委托单位</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.company_name_wt}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">表单类型</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.type_name}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">需求</p>
          <p style="margin-top:5px;margin-left:10px"
             v-if='form_info.content'>{{form_info.content}}</p>
          <p style="margin-top:5px;margin-left:10px"
             v-if='show_form_info && form_info.content_arr.length'>
            <table border="0"
                   cellspacing="0"
                   cellpadding="0"
                   style="border-collapse:collapse">
              <tr style="height:30px">
                <td style='width:180px; border:1px solid #ccc; padding-left:5px'>名称</td>
                <td style='width:150px; border:1px solid #ccc; padding-left:5px'>规格</td>
                <td style='width:100px; border:1px solid #ccc; padding-left:5px'>单价</td>
                <td style='width:100px; border:1px solid #ccc; padding-left:5px'>数量</td>
              </tr>
              <tr v-for="(item, index) in form_info.content_arr"
                  style="height:30px">
                <td style='border:1px solid #ccc; padding-left:5px'>{{item.name}}</td>
                <td style='border:1px solid #ccc; padding-left:5px'>{{item.specs}}</td>
                <td style='border:1px solid #ccc; padding-left:5px'>{{item.price}}</td>
                <td style='border:1px solid #ccc; padding-left:5px'>{{item.num}}</td>
              </tr>
            </table>
          </p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder"
             v-if='show_form_info && form_info.content_arr.length'>总价</p>
          <p style="margin-top:5px;margin-left:10px"
             v-if='show_form_info && form_info.content_arr.length'>{{form_info.total_money}}</p>
          <p style="margin-top:25px;margin-left:10px;font-weight:bolder">处理结果</p>
          <p style="margin-top:5px;margin-left:10px">{{form_info.result}}</p>
        </div>
      </div>
      <Button type="primary"
              v-print="'#formDetail'"
              style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:255px; margin-top:20px; margin-bottom:20px">打印</Button>
    </Modal>
  </div>
</template>
<script>
import config from '@/config'
import { formList, formTypeListForSelect, readForm, changeFormStatus } from '@/api/main'
export default {
  data () {
    return {
      pagenation: {},
      columns: [
        {
          key: 'name',
          title: '姓名',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.name)
          },
        },
        {
          key: 'phone',
          title: '手机号',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.phone)
          },
        },
        {
          key: 'company_name',
          title: '企业名称',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.company_name)
          },
        },
        {
          key: 'service_type_name',
          title: '服务类型',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.service_type_name)
          },
        },
        {
          key: 'voltage_level_name',
          title: '电压等级',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.voltage_level_name)
          },
        },
        {
          key: 'operation_type_name',
          title: '运维方式',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.operation_type_name)
          },
        },
        {
          key: 'company_name_sg',
          title: '施工单位',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.company_name_sg)
          },
        },
        {
          key: 'company_name_wt',
          title: '委托单位',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.company_name_wt)
          },
        },
        {
          key: 'type_name',
          title: '表单类型',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.type_name)
          },
        },
        {
          key: 'created_time',
          title: '提交时间',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
        {
          title: '操作',
          align: 'center',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                  },
                  on: {
                    click: () => {
                      this.formInfo(params.row)
                    },
                  },
                },
                '详情',
              ),
              h(
                'Button',
                {
                  style: {
                    //marginBottom: '5px',
                    marginRight: '5px',
                    border: 0,
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                    //display: params.row.is_read == 0 ? 'inline-block': 'none'
                  },
                  on: {
                    click: () => {
                      this.readForm(params.row)
                    },
                  },
                },
                params.row.is_read == 1 ? '查看' : '处理',
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    title: '您确定要删除该表单吗?',
                    transfer: true,
                  },
                  on: {
                    'on-ok': () => {
                      let obj = {}
                      obj.id = params.row.id
                      obj.status = -1
                      changeFormStatus(obj).then(res => {
                        if (res.code === 0) {
                          this.$Message.success('操作成功')
                          this.init()
                        } else {
                          this.$Message.error(res.text)
                        }
                      })
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      style: {
                        //marginBottom: '5px',
                        border: 0,
                        background: 'transparent',
                        fontSize: '14px',
                        color: '#377EEF'
                      },
                      props: {
                        placement: 'top',
                        size: 'small',
                      },
                    },
                    '删除',
                  ),
                ],
              ),
            ])
          },
        },
      ],
      list: [],
      form_type_list: [],
      loading: true,
      saving: false,
      show_content: false,
      show_result: false,
      result: '',
      filter: {
        page: 0,
        name: '',
        phone: '',
        company_name: '',
        form_type: this.$route.params.code,
      },
      formValidate: {
        id: 0,
        content: ''
      },
      form_info: {},
      show_form_info: false,
    }
  },
  methods: {
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.init()
    },
    search: function () {
      this.filter.page = 0
      this.init()
    },
    formInfo (obj) {
      this.form_info = Object.assign({}, obj)
      this.show_form_info = true
    },
    readForm (obj) {
      if (obj.is_read == 1) {
        this.result = obj.result
        this.show_result = true
      } else {
        this.formValidate.id = obj.id
        this.show_content = true
      }
    },
    handleSubmit () {
      if (this.formValidate.content == '') {
        this.$Message.error("请输入处理结果"); return;
      }
      readForm(this.formValidate).then(res => {
        if (res.code == 0) {
          this.$Message.success("操作成功");
          this.show_content = false
          this.init()
        } else {
          this.$Message.error(res.text);
        }
      })
    },
    init () {
      formList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    },
  },
  mounted () {
    this.init();
    formTypeListForSelect().then(res => {
      this.form_type_list = res.data
    })
  }
}
</script>
<style lang="less">
@page {
	margin-top: 1mm; //去掉页眉
	margin-bottom: 1mm; //去掉页脚
}
</style>